<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table border="1" cellspacing="0" cellpadding="10">
      <tr></tr>
    </table>
    <script>
      let tbody = document.querySelector("tbody");
      function ajaxTool(method, url, data, cb) {
        let xhr = new XMLHttpRequest();
        let a = "";
        for (const key in data) {
          a += `${key}=${data[key]}&`;
        }
        let newUrl = url + "?" + a.slice(0, -1);
        //切掉最后多出来的那个&
        xhr.open(method, newUrl);
        xhr.send();
        xhr.addEventListener("readystatechange", function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              cb(JSON.parse(xhr.responseText));
            }
          }
        });
      }
      let url = "http://netease.0melon0.cn/search";
      let data = {
        keywords: "林俊杰",
        limit: 10,
        offset: 1,
      };
      let method = "GET";
      ajaxTool(method, url, data, function (data) {
        console.log(data);
        data.result.songs.forEach(function (ele) {
          // console.log(ele);
          tbody.innerHTML += `<tr>
            <td>${ele.name}</td>
            <td>${ele.artists[0].name}</td>
            <td>${ele.album.name}</td>
            <td>${formateTime(ele.duration)}</td></tr>`;
        });
      });
      function formateTime(num) {
        num /= 1000;
        let m = Math.floor(num / 60);
        let s = Math.floor(num % 60);
        s < 10 ? (s = "0" + s) : s;
        return m + ":" + s;
      }
    </script>
  </body>
</html>
